<template>
  <div class="search-popup">
    <!-- 搜索框 -->
    <van-sticky>
      <van-search
        v-model="searchValue"
        :placeholder="placeholder"
        shape="round"
        show-action
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
    </van-sticky>

    <HistoryHot
      v-show="blockShow == 1"
      :historyList="historyList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    ></HistoryHot>

    <SearchTipsList
      v-show="blockShow == 2"
      :searchTipsList="searchTipsList"
      @cellClick="tagClick"
    ></SearchTipsList>

    <!-- <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我是有底线的"
      @load="onLoad"
    > -->
    <SearchProducts
      v-show="blockShow == 3"
      :filterCategory="filterCategory"
      :goodsList="goodsList"
      @categoryChange="categoryChange"
      @priceChange="priceChange"
    ></SearchProducts>
    <!-- </van-list> -->
    <FanHui></FanHui>
  </div>
</template>

<script>
import HistoryHot from "@/components/HistoryHot.vue";
import SearchTipsList from "@/components//SearchTipsList.vue";
import SearchProducts from "@/components/SearchProducts.vue";
import FanHui from "@/components/FanHui.vue";
import {
  getSearchPopupData,
  getSearchTipsListData,
  getGoodsList,
} from "@/request/api.js";
export default {
  name: "SearchPopup",
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProducts,
    FanHui,
  },
  data() {
    return {
      // 用户输入的关键字
      searchValue: "",
      // 搜索框提示文字
      placeholder: "请输入关键词",
      // 判断组件展示标识
      blockShow: 1,
      // 历史列表数据
      historyList: [],
      // 热门搜索列表数据
      hotKeywordList: [],
      // 搜索实时提示列表数据
      searchTipsList: [],
      // 搜索商品内容的分类数据
      filterCategory: [],
      //搜索商品的内容列表数据
      goodsList: [],
      // 价格排序
      order: "desc",
      // 分类id
      categoryId: 0,
      // 默认的搜索方式
      sort: "id",
      loading: true,
      finished: false,
      page: 1,
      size: 100,
      val: "",
    };
  },
  async created() {
    const res = await getSearchPopupData();
    if (res.errno == 0) {
      this.placeholder = res.data.defaultKeyword.keyword;
      this.historyList = res.data.historyKeywordList;
      this.hotKeywordList = res.data.hotKeywordList;
    }
  },
  watch: {
    searchValue(newValue) {
      if (newValue.length === 0) this.blockShow = 1;
    },
  },
  methods: {
    async onSearch(val) {
      // if (val)  this.val =val;
      this.blockShow = 3;
      const res = await getGoodsList({
        keyword: val,
        page: this.page,
        size: this.size,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort,
      });
      // this.page++;
      if (res.errno == 0) {
        this.goodsList = res.data.goodsList;
        // this.goodsList = [...this.goodsList, ...res.data.goodsList];
        // this.loading = false;
        // if (res.data.goodsList.length == 0) this.finished = true;

        let newArr = JSON.parse(
          JSON.stringify(res.data.filterCategory)
            .replace(/name/g, "text")
            .replace(/id/g, "value")
        );
        this.filterCategory = newArr;
      }
    },
    onCancel() {
      this.$store.commit("changeIsShadwo", false);
      this.$router.go(-1);
      this.blockShow = 1;
    },
    async onInput(val) {
      this.blockShow = 2;
      const res = await getSearchTipsListData({ keyword: val });
      if (res.errno == 0) {
        this.searchTipsList = res.data;
      }
    },
    categoryChange(value) {
      this.categoryId = value;
      this.onSearch(this.searchValue);
    },
    priceChange(value) {
      this.order = value;
      this.sort = "price";
      this.onSearch(this.searchValue);
    },
    tagClick(value) {
      this.searchValue = value;
      this.onSearch(value);
    },
    onLoad() {
      onSearch(this.val);
    },
  },
  // 路由离开 - 触发(保存滚动位置)
  beforeRouteLeave(to, from, next) {
    from.meta.scrollTop = window.scrollY;
    next();
  },
};
</script>

<style lang="less" scoped>
.search-popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #efefef;
  z-index: 99;
}
</style>
